<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>index</title>
    <style>
        #thid {
            color: #2aabd2;
        }

        .thclass {
            border: #8a6d3b solid 2px;
        }

    </style>
</head>
<body>
<div>
    <h3>获取单个对象</h3>
    <p th:text="${user.id}">azhuo</p>
    <p th:text="${user.username}">azhuo</p>
    <p th:text="${user.age}">age</p>
    <hr/>
</div>

<div>
    <h3>列表遍历</h3>
    <table>
        <thead>
        <tr>
            <td>编号</td>
            <td>姓名</td>
            <th>性别</th>
            <th>年龄</th>
        </tr>
        </thead>
        <tbody>
        <tr th:each="userL : ${userList}">
            <td th:text="${userL.id}"></td>
            <td th:text="${userL.username}"></td>
            <th th:text="${userL.sex}"></th>
            <th th:text="${userL.age}"></th>
        </tr>
        </tbody>
    </table>
    <br/>
    <span th:each="u:${userList}" th:text="${u.username}"></span><br/>
    行内写法：<span th:each="u:${userList}">[[${u.sex}]]</span>
    <hr/>
</div>

<div>
    <h3>引入URL</h3>
    <a th:href="@{https://www.baidu.com}">百度：绝对路径</a><br/>
    <a th:href="@{/}">相对路径</a><br/>
    <a th:href="@{css/bootstrap.css}">Content路径,默认访问static下的css文件夹</a><br/>
    <hr/>
</div>

<div>
    <h3>字符串替换</h3>
    <span th:text="|欢迎您,${user.username}!|"></span><br/>
    <span th:text="'欢迎您,'+${user.username}+'!'"></span>
    <hr/>
</div>

<div>
    <h3>算术运算</h3>
    <span th:text="${user.id} + 2">ids</span>
    <h3>逻辑运算</h3>
    <!--  th:if属性判断条件是否成立，如果条件满足，显示标签。
      逻辑运算符>, <, <=,>=，==,!=都可以使用，唯一需要注意的是使用<,>时需要用它的HTML转义符
      -->
    <span th:if="${user.id} == 1">abc</span>
    <span th:if="${user.id} != 1">def</span>
    country: <span th:text="${#locale.country}"></span>
    <hr/>
</div>

<div>
    <h3>替代属性</h3>
    <div id="id01" class="myDiv" th:id="${thid}" th:class="${thclass}">看到了吗？</div>
    <hr/>
</div>

<div>

    <hr/>

</div>
<script src="./js/bootstrap.js" th:src="@{/js/bootstrap.js}"></script>
</body>
</html>